<script setup lang="ts">
  import { useForm } from '@/hooks/arco/useForm';
  import {
    createInstDept,
    editInstDept,
    queryInstMainDeptList,
    deleteInstDept,
  } from '@/api/organization/department';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import useDetailDrawerBinder from '@/hooks/arco/useDetailDrawerBinder';

  const editForm = useForm({
    state: {
      deptId: '',
      name: '',
      parentId: '',
      members: 0,
      createdAt: '',
    },
    rules: {
      name: {
        required: true,
        message: '请输入部门名称',
      },
      parentId: {
        required: true,
        message: '请选择上级部门',
      },
    },
  });

  const deptSelect = useSelectOption({
    name: '上级部门',
    apiFun: queryInstMainDeptList,
    fieldNames: {
      value: 'deptId',
      label: 'name',
    },
    transformDataFun(data) {
      data.unshift({
        deptId: '-1',
        name: '无',
      });
      return data;
    },
  });

  const modal = useDetailDrawerBinder({
    modalName: '部门',
    modes: ['detail', 'add', 'edit'],
    deleteApi: () => deleteInstDept(editForm.state.deptId),
    deleteText: '提示：需要为该部门的员工重新分配部门。',
    onShow(mode, otherParams) {
      if (mode === 'add') {
        editForm.backToInit();
      } else {
        editForm.setFieldsValue({
          deptId: otherParams.deptId,
          name: otherParams.name,
          parentId: otherParams.parentId || '-1',
          members: otherParams.members || 0,
          createdAt: otherParams.createdAt,
        });
      }
      deptSelect.retry();
    },
    async onOkClick(mode) {
      await editForm.validate();
      const { parentId, ...ot } = editForm.state;
      if (mode === 'add') {
        return createInstDept({
          parentId: parentId === '-1' ? '' : parentId,
          ...ot,
        });
      }
      return editInstDept({
        parentId: parentId === '-1' ? '' : parentId,
        ...ot,
      });
    },
  });

  defineExpose(modal.expose);
</script>

<template>
  <detail-drawer v-bind="modal.bindProps">
    <a-form
      v-bind="editForm.bindProps"
      :disabled="modal.isShow('detail')"
      layout="vertical"
    >
      <a-row>
        <a-col :span="24">
          <a-form-item field="parentId" label="上级部门">
            <a-select
              v-model="editForm.state.parentId"
              class="w-full"
              allow-clear
              v-bind="deptSelect.bindProps"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item field="name" label="部门名称">
            <a-input
              v-model="editForm.state.name"
              placeholder="请输入部门名称"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            v-if="modal.isShow('detail')"
            field="members"
            label="部门人数"
          >
            <a-input-number v-model="editForm.state.members" readonly />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            v-if="modal.isShow('detail')"
            field="createdAt"
            label="创建时间"
          >
            <a-input v-model="editForm.state.createdAt" readonly />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </detail-drawer>
</template>

<style lang="less" scoped></style>
